<script>
import { ElsCollapseItem } from "../collapse";
import BaseNode from "../../mixins/node.js";
import $ from "jquery";
import _ from "lodash";
export default {
  props: {
    actived: Boolean,
    showType: String,
    positionIndex: [String, Number],
  },
  mixins: [BaseNode],
  data() {
    return {
      isPatientNode: true,
    };
  },
  computed: {
    // actived() {
    //   return this.id === this.activedId;
    // },
    infectionTooltip() {
      if (this.data.infectionCount != null && this.data.infectionCount != "") {
        let infectionList = this.data.infectionList || [];
        let infectionStr = "";
        infectionList.forEach((o, index) => {
          if (index == 0) {
            infectionStr = "传染风险：";
          } else {
            infectionStr += "，";
          }
          infectionStr += o.NAME + (o.REMARK ? " " + o.REMARK : "");
        });
        return infectionStr;
      } else {
        return "";
      }
    },
  },
  methods: {
    handlerExpand(handler) {
      handler();
      if (!this.actived) {
        this.$emit("clickedHandler", this.id);
      }
    },
    addElToDragEl(element) {
      let el = this.$refs.dragRef;
      while (el.firstChild) {
        el.removeChild(el.firstChild);
      }
      el.appendChild(element.cloneNode(true));
      return el;
    },
    itemDragStartHandler(evt) {
      let target = $(this.$el).find(".collapse-item")[0];
      evt.dataTransfer.setDragImage(target, 0, 0);
    },
    formatter({ field, cellValue }) {
      if (field === "finalAnesTypeName") {
        let otherAnesTypeNames = ["其他", "其他麻醉"];
        if (cellValue) {
          if (
            otherAnesTypeNames.includes(cellValue) &&
            !_.isEmpty(this.data.anesTypeNameApply)
          )
            return cellValue + "（" + this.data.anesTypeNameApply + "）";
          else return cellValue;
        } else {
          if (!_.isEmpty(this.data.anesTypeName)) {
            if (
              otherAnesTypeNames.includes(this.data.anesTypeName) &&
              !_.isEmpty(this.data.anesTypeNameApply)
            )
              return (
                this.data.anesTypeName +
                "（" +
                this.data.anesTypeNameApply +
                "）"
              );
            else return this.data.anesTypeName;
          } else return "";
        }
      }
    },
    clickedHandler() {
      this.$emit("clickedHandler", this.id);
    },
  },
  components: {
    ElsCollapseItem,
  },
};
</script>
<template>
  <div
    :class="['card-patient', { actived }]"
    @click="clickedHandler"
    :data-id="id"
    @dragstart="itemDragStartHandler"
    :draggable="true"
  >
    <div class="drag-tip-number"></div>
    <els-collapse-item class="collapse-item" :name="id">
      <template #header="{ isActive, handler }">
        <div class="top-right-d"></div>
        <div v-if="showType === 'fix'" class="fix-type-number">1</div>
        <div class="card-main-header">
          <div class="custom-header">
            <div class="--left">
              <i class="iconfont icon-Check-Circle-Fill"></i>
              <span>{{ data.patientName }}</span>
            </div>
            <div class="--right">
              <i class="iconfont icon-history" aria-hidden="true"></i>
              <span style="padding-left: 3px">11 h</span>
              <el-divider direction="vertical"></el-divider>
              <!-- <i class="iconfont icon-move1" aria-hidden="true"></i> -->
              <!-- <i class="iconfont icon-move" aria-hidden="true"></i> -->
              <i class="iconfont icon-androidgengduo-copy"></i>
              <el-divider
                direction="vertical"
                style="margin-right: 0"
              ></el-divider>
              <i
                @click.stop="handlerExpand(handler)"
                class="iconfont els-collapse-item__arrow icon-down"
                :class="{ 'is-active': isActive }"
              ></i>
            </div>
          </div>
          <div class="custom-sub-header">
            <div class="patient-info-wrap">
              <div class="patient-info">
                <div class="patient-base-info">
                  <el-tooltip
                    :open-delay="800"
                    :enterable="false"
                    :content="
                      [
                        data.gender || '-',
                        data.patientAge || '-',
                        data.weight || '-',
                        data.applyDeptName || '-',
                        `${data.bedNumber || '-'}床`,
                        data.feeLevelName || '-',
                      ].join(' · ')
                    "
                    placement="top-start"
                  >
                    <span>{{
                      [
                        data.gender || "-",
                        data.patientAge || "-",
                        data.weight || "-",
                        data.applyDeptName || "-",
                        `${data.bedNumber || "-"}床`,
                        data.feeLevelName || "-",
                      ].join(" · ")
                    }}</span>
                  </el-tooltip>
                </div>
                <div class="patient-extends-info">
                  <el-tooltip
                    :content="data.surgeryName || '-'"
                    :enterable="false"
                    :open-delay="800"
                    placement="bottom-start"
                  >
                    <span>{{ data.surgeryName || "-" }}</span>
                  </el-tooltip>
                </div>
              </div>
              <div class="patient-btn">
                <el-button class="out-room-btn" size="mini">{{
                  data.state || "-"
                }}</el-button>
              </div>
            </div>
            <div class="patient-dev-status-wrap">
              <div class="patient-device">
                <span>超声刀，血液回收（腹部备两切口）</span>
              </div>
              <div class="patient-status">
                <div v-if="data.isCancel" class="status-tag blue">
                  <span>停</span>
                </div>
                <div
                  v-if="data.isUrgent && dataType == '2'"
                  class="status-tag red"
                >
                  <span>急</span>
                </div>
                <div v-if="data.isolationName" class="status-tag gray">
                  <span>隔</span>
                </div>
                <el-tooltip
                  v-if="data.infectionCount"
                  :disabled="!infectionTooltip"
                  effect="dark"
                >
                  <div slot="content">{{ infectionTooltip }}</div>
                  <div class="status-tag purple">
                    <i class="iconfont icon-0-44"></i>
                  </div>
                </el-tooltip>

                <div class="status-tag green">
                  <i class="iconfont icon-binglike"></i>
                </div>
                <div class="status-tag orange">
                  <i class="iconfont icon-xieyang"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="custom-footer">
            <el-tag
              v-show="data.surgeryDoctorName"
              class="tag chief-doctor"
              size="small"
            >
              {{ data.surgeryDoctorName }}
            </el-tag>
            <el-tag v-show="data.anesDoctor1Name" class="tag ane" size="small">
              {{ data.anesDoctor1Name }}
            </el-tag>
            <el-tag v-show="data.anesDoctor2Name" class="tag ane" size="small">
              {{ data.anesDoctor2Name }}
            </el-tag>
            <el-tag class="tag instrument" size="small">器械</el-tag>
            <el-tag class="tag instrument" size="small">器械</el-tag>
            <el-tag
              v-show="data.circuitNurse1Name"
              class="tag circulating"
              size="small"
            >
              {{ data.circuitNurse1Name }}
            </el-tag>
            <el-tag
              v-show="data.circuitNurse2Name"
              class="tag circulating"
              size="small"
            >
              {{ data.circuitNurse2Name }}
            </el-tag>
            <div style="flex: 1"></div>
            <div class="status-tag blue">{{ positionIndex + 1 }}</div>
          </div>
        </div>
      </template>
      <div class="detail">
        <div class="--left">
          <el-steps direction="vertical" :space="30" :active="4">
            <el-step icon="iconfont icon-Check-Circle-Fill">
              <div slot="title" class="step-content">
                <div class="step-left">
                  <span>入手术室</span>
                </div>
                <div class="step-right">
                  <span>{{ "10:10" }}</span>
                </div>
              </div>
            </el-step>
            <el-step icon="iconfont icon-Check-Circle-Fill">
              <div slot="title" class="step-content">
                <div class="step-left">
                  <span>入手术间</span>
                </div>
                <div class="step-right">
                  <span>{{ "10:15" }}</span>
                </div>
              </div>
            </el-step>
            <el-step icon="iconfont icon-Check-Circle-Fill">
              <div slot="title" class="step-content">
                <div class="step-left">
                  <span>麻醉开始</span>
                </div>
                <div class="step-right">
                  <span>{{ "10:20" }}</span>
                </div>
              </div>
            </el-step>
            <el-step icon="iconfont icon-jiazaiyuanhuan-ban">
              <div slot="title" class="step-content">
                <div class="step-left">
                  <span>手术开始</span>
                </div>
                <div class="step-right">
                  <span>{{ "10:25" }}</span>
                </div>
              </div>
            </el-step>
            <el-step icon="iconfont icon-history">
              <div slot="title" class="step-content">
                <div class="step-left">
                  <span>手术结束</span>
                </div>
                <div class="step-right">
                  <span>{{ "" }}</span>
                </div>
              </div>
            </el-step>
            <el-step icon="iconfont icon-history">
              <div slot="title" class="step-content">
                <div class="step-left">
                  <span>麻醉结束</span>
                </div>
                <div class="step-right">
                  <span>{{ "" }}</span>
                </div>
              </div>
            </el-step>
            <el-step icon="iconfont icon-history">
              <div slot="title" class="step-content">
                <div class="step-left">
                  <span>出手术间</span>
                </div>
                <div class="step-right">
                  <span>{{ "" }}</span>
                </div>
              </div>
            </el-step>
            <el-step icon="iconfont icon-history">
              <div slot="title" class="step-content">
                <div class="step-left">
                  <span>出手术室</span>
                </div>
                <div class="step-right">
                  <span>{{ "" }}</span>
                </div>
              </div>
            </el-step>
          </el-steps>
        </div>
        <div class="--right">
          <div class="sur-list">
            <div class="sur-list-item">
              <div class="--label">患者血型</div>
              <div class="--value">
                {{
                  `${data.bloodAbo || "-"} ${
                    data.bloodRhd ? `（RH ${data.bloodRhd}）` : ""
                  }`
                }}
              </div>
            </div>
            <div class="sur-list-item">
              <div class="--label">入院时间</div>
              <div class="--value">{{ data.admissionDate || "-" }}</div>
            </div>
            <div class="sur-list-item">
              <div class="--label">手术历史</div>
              <div class="--value">第3 次手术</div>
            </div>
            <div class="sur-list-item">
              <div class="--label">麻醉方式</div>
              <div class="--value">
                {{
                  formatter({
                    field: "finalAnesTypeName",
                    cellValue: data.finalAnesTypeName,
                  })
                }}
              </div>
            </div>
            <div class="sur-list-item">
              <div class="--label">预约台次</div>
              <div class="--value">01 间 013 台</div>
            </div>
            <div class="sur-list-item">
              <div class="--label">手术助手</div>
              <div class="--value">{{ data.surgeryAssistant || "-" }}</div>
            </div>
            <div class="sur-list-item">
              <div class="--label">麻醉助手</div>
              <div class="--value">
                {{ data.anesAssistantName?.join("，") || "-" }}
              </div>
            </div>
            <div class="sur-list-item">
              <div class="--label">灌注医师</div>
              <div class="--value">{{ data.perfusionDoctorName || "-" }}</div>
            </div>
            <div class="sur-list-item">
              <div class="--label">灌注护士</div>
              <div class="--value">{{ data.perfusionNurseName || "-" }}</div>
            </div>
          </div>
        </div>
      </div>
    </els-collapse-item>
    <div class="dragging-wp" ref="dragRef"></div>
  </div>
</template>
<style scoped lang="less">
.card-patient {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 20px;
  width: 360px;
  position: relative;
  .dragging-wp {
    position: fixed;
    left: 0;
    top: -9999px;
    z-index: -100;
    // visibility: hidden;
  }
  .drag-tip-number {
    width: 20px;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.3s linear;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    align-items: center;
    justify-content: center;
    height: 100%;

    background: #ccc;
  }

  &.actived {
    > .collapse-item {
      ::v-deep {
        .els-collapse-item__header {
          border-color: rgba(22, 119, 255, 1);
          background: rgba(22, 122, 255, 0.09);
          .top-right-d {
            opacity: 1;
          }
        }
      }
    }
  }
  .collapse-item {
    transition: all 0.3s linear;
    background: #fff;
    ::v-deep {
      &.is-active {
        // background: rgba(22, 122, 255, 0.09);
        background: #eaf3ff;
      }
      .els-collapse-item__header {
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        position: relative;
        transition: all 0.3s linear;
        padding: 0;
        background: #fff;
        &.is-active {
          // background: #409eff29;
          // border-color: #1677ff;
          // background: rgba(22, 122, 255, 0.09);
          border-color: rgba(22, 119, 255, 1);
          background: rgba(22, 122, 255, 0.09);
          .els-collapse-item__arrow {
            margin-top: -2px;
            transform: rotate(180deg);
          }
          .top-right-d {
            opacity: 1;
          }
        }
      }
    }
  }
  .top-right-d {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    right: 1px;
    top: 1px;
    transition: opacity 0.3s linear;
    border-top-right-radius: 4px;
    border-top: 12px solid #1677ff;
    border-left: 12px solid transparent;
  }
  .fix-type-number {
    width: 0px;
    display: none;
    transition: all 0.3s linear;
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    align-items: center;
    justify-content: center;

    background: #1677ff;
  }
  .card-main-header {
    padding: 8px;
    flex: 1;
    .custom-header {
      display: flex;
      align-items: center;
      padding-bottom: 2px;
      > .--left {
        flex: 1;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.85);
        .iconfont {
          color: #30a46c;
          margin-right: 5px;
        }
      }
      > .--right {
        display: flex;
        align-items: center;
        .iconfont {
          cursor: pointer;
          display: block;
          width: 14px;
          height: 20px;
          font-size: 14px;
          margin-right: 0;
          color: rgba(0, 0, 0, 0.45);
          ~ .iconfont {
            margin-left: 8px;
          }
          &.els-collapse-item__arrow {
            margin-left: 3px;
          }
          &.icon-history {
            color: rgba(0, 0, 0, 0.25);
          }
          &.icon-androidgengduo-copy {
            margin-left: 0px;
          }
        }
        ::v-deep .el-divider {
          color: rgba(0, 0, 0, 0.06);
          margin: 0 5px;
        }
      }
    }
    .custom-sub-header {
      color: rgba(0, 0, 0, 0.45);
      line-height: 20px;
      font-size: 12px;
      font-weight: 400;

      .patient-info-wrap {
        display: flex;
        .patient-info {
          flex: 1;
          .patient-base-info,
          .patient-extends-info {
            min-width: 0;
            max-width: 272px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .patient-btn {
          padding: 10px 0 0 5px;
          .out-room-btn {
            border-radius: 4px;
            // background: rgba(0, 0, 0, 0.04);
            // border: 1px solid rgba(217, 217, 217, 1);
            padding: 0;
            width: 64px;
            height: 22px;
            line-height: 22px;
          }
        }
      }
      .patient-dev-status-wrap {
        display: flex;
        .patient-device {
          flex: 1;
        }
        .patient-status {
          display: flex;
          align-items: center;
          .status-tag {
            margin-right: 5px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
    .custom-footer {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 5px;
      .tag {
        margin-right: 5px;
        width: 40px;
        height: 22px;
        line-height: 22px;
        &:last-child {
          margin-right: 0;
        }
        &.chief-doctor {
          color: #1e8f6b;
          border-color: #bceed2;
          background-color: #e0faea;
        }
        &.ane {
          color: #315fca;
          border-color: #cbe1ff;
          background-color: #eaf3ff;
        }
        &.instrument {
          color: #b6453f;
          border-color: #ffdadf;
          background-color: #ffeef1;
        }
        &.circulating {
          color: #bd7c0d;
          border-color: #ffe6c1;
          background-color: #fff2de;
        }
      }
    }
  }

  .status-tag {
    width: 20px;
    height: 20px;
    line-height: 22px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 100%;
    &.blue {
      background: #1677ff;
    }
    &.red {
      background: #e63f07;
    }
    &.gray {
      background: #5f8194;
    }
    &.purple {
      background: #7c3cc9;
    }
    &.green {
      background: #03a3a3;
    }
    &.orange {
      background: #eb9328;
    }
  }
  .detail {
    display: flex;
    padding: 8px;
    .--left {
      width: 140px;
      border-right: 1px solid rgba(0, 0, 0, 0.15);
      padding-right: 8px;
      ::v-deep .el-step {
        &:last-child {
          flex-basis: 18px !important;
        }
        .el-step__head {
          width: 16px;
          &.is-finish {
            color: rgba(48, 164, 108, 1);
            border-color: rgba(48, 164, 108, 1);
          }
          &.is-process {
            color: rgba(0, 0, 0, 0.25);
            border-color: rgba(0, 0, 0, 0.25);
          }
          &.is-wait {
            color: rgba(0, 0, 0, 0.25);
            border-color: rgba(0, 0, 0, 0.25);
          }
        }
        .el-step__title {
          &.is-process {
            font-weight: normal;
          }
        }
        .el-step__line {
          left: 9px;
        }
        .el-step__icon {
          font-size: 14px;
          width: 20px;
          height: 20px;
          border-radius: 100%;
          background: #e7f1fe;
          padding: 3px;
        }
        .el-step__icon-inner {
          font-weight: unset;
          &.icon-Check-Circle-Fill {
            color: #30a46c;
          }
          &.icon-jiazaiyuanhuan-ban {
            color: #1677ff;
          }
        }
      }
      .step-content {
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
        font-size: 12px;
        > .step-left {
          flex: 1;
        }
        > .step-right {
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
    .--right {
      flex: 1;
      font-size: 12px;
      padding-left: 8px;
      .sur-list {
        line-height: 20px;
        .sur-list-item {
          display: flex;
          width: 196px;
          .--label {
            width: 60px;
            color: #1677ff;
            &::after {
              content: ":";
            }
          }
          .--value {
            flex: 1;
            white-space: normal;
            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
  }
}
</style>
